<template>
    <div>
        <!-- 查询表单 -->
        <el-form ref="informationRef" :inline="true" :model="informationForm" class="demo-form-inline"
            label-position="right" label-width="80px" size="medium">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="所属院系" prop="faculty">
                        <el-input v-model="informationForm.faculty" placeholder="请输入所属院系"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="学生姓名" prop="studentName">
                        <el-input v-model="informationForm.studentName" placeholder="请输入学生姓名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="学生学号" prop="studentId">
                        <el-input v-model="informationForm.studentId" placeholder="请输入学生学号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item>
                        <el-button type="info" size="medium" @click="onSubmit">查 询</el-button>
                        <el-button type="info" size="medium" @click="informationForms">重 置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-button type="info" size="medium" @click="addstudentInformation(1)">新 建</el-button>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="info" size="medium" @click="leadingInBtn">导 入</el-button>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="info" size="medium" @click="exportBtn">导 出</el-button>
                    </el-col>
                    <el-col :span="6">
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="6">
            </el-col>
            <el-col :span="6">
            </el-col>
            <el-col :span="6">
            </el-col>
        </el-row>

        <el-table :data="informationTable">
            <el-table-column type="index" label="序号" :index="indexMethod">
            </el-table-column>
            <el-table-column prop="faculty" label="所属院系">
            </el-table-column>
            <el-table-column prop="studentName" label="学生姓名">
            </el-table-column>
            <el-table-column prop="sex" label="性别">
                <template slot-scope="scope">
                    {{ scope.row.sex == 1 ? '男' : '女' }}
                </template>
            </el-table-column>
            <el-table-column prop="idNumber" label="身份证号">
            </el-table-column>
            <el-table-column prop="StudentId" label="学号">
            </el-table-column>
            <el-table-column prop="specialty" label="专业">
            </el-table-column>
            <el-table-column prop="studentYear" label="年级">
            </el-table-column>
            <el-table-column prop="contactNumber" label="联系电话">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="editInformation(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" @click="informationDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pagination.showApage" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageNum"
            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
        </el-pagination>
        <!-- 弹框 -->
        <add-form ref="addForm" @submit="handleSubmit"></add-form>
    </div>
</template>

<script>
import AddForm from '@/views/appointmentManagement/addinformation'
export default {
    components: {
        AddForm,
    },
    data() {
        return {
            // 分页
            pagination: {
                // 显示第几页
                showApage: 1,
                // 总条数
                total: 50,
                // 每页显示多少条
                pageNum: 10,
            },
            // 表单查询
            informationForm: {
                // 所属院系
                faculty: '',
                // 学生姓名
                studentName: '',
                // 学号
                studentId: ''
            },
            informationTable: [{
                id: 1,
                // 院系
                faculty: '文学院',
                // 学生姓名
                studentName: '王强',
                // 性别 1 男  2 女
                sex: 1,
                // 身份证号
                idNumber: '658458877778954582',
                // 学号
                StudentId: '568956985',
                // 专业
                specialty: '护理',
                // 年级
                studentYear: '18级',
                // 联系电话
                contactNumber: '13545214521'

            }, {
                id: 2,
                faculty: '文学院',
                studentName: '王强',
                sex: 2,
                idNumber: '658458877778954582',
                StudentId: '568956985',
                specialty: '护理',
                studentYear: '18级',
                contactNumber: '13545214521'
            }, {
                id: 3,
                faculty: '文学院',
                studentName: '王强',
                sex: 1,
                idNumber: '658458877778954582',
                StudentId: '568956985',
                specialty: '护理',
                studentYear: '18级',
                contactNumber: '13545214521'
            }, {
                id: 4,
                faculty: '文学院',
                studentName: '王强',
                sex: 2,
                idNumber: '658458877778954582',
                StudentId: '568956985',
                specialty: '护理',
                studentYear: '18级',
                contactNumber: '13545214521'
            },]
        }
    },
    methods: {
        // 不足两位数 补0操作
        indexMethod(index) {
            return (index + 1).toString().padStart(2, '0');
        },
        // 查询
        onSubmit() {
        },
        // 新建
        addstudentInformation(e) {
            this.$refs.addForm.openDialog(e)
        },
        // 编辑数据回显
        editInformation(e) {
            this.$refs.addForm.openDialog(e)
        },
        // 删除某个学生信息
        informationDelete(e) {
            this.$confirm('此操作将永久删除该学生信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 发送请求的删除的接口
                // this.$message({
                //     type: 'success',
                //     message: '删除成功!'
                // });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        informationForms() {
            this.$refs.informationRef.resetFields()
            // 重新调用获取数据列表函数
        },
        handleSubmit() {

        },
        // 导入
        leadingInBtn() {

        },
        // 到出
        exportBtn() {

        },
        // 每页条数
        handleSizeChange(e) {
            this.pagination.pageNum = e
            // 重新掉一下数据
        },
        // 当前第几页
        handleCurrentChange(val) {
            this.pagination.showApage = val
            // 重新掉一下数据
        },

    }

}
</script>

<style lang="less" scoped></style>